<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>layui框架</title>
  <link rel="stylesheet" type="text/css" href="css/index.css" />
  <link rel="stylesheet" href="./layui/css/layui.css" />
  <script src="./layui/layui.js"></script>
</head>

<body>
  <div class="layui-fluid">
    <div class="layui-row">
      <marquee id="loop" behavior="scroll" direction="left" loop="infinite" width="100%" height="50" valign="middle">
      </marquee>
    </div>
    <div class="layui-row">
      <div class="layui-col-md4">
        <h3><a href="https://www.layui.com/" target="_blank">去LayUI官网</a></h3>
      </div>
      <div class="layui-col-md4">
        <h3><a href="https://layer.layui.com/" target="_blank">Layer官网</a></h3>
      </div>
      <div class="layui-col-md4">
        <h3><a href="https://fly.layui.com/extend/" target="_blank">layui 第三方扩展</a></h3>
      </div>
    </div>
    <div class="layui-row layui-col-space5">
      <div class="layui-col-md4">
        <h2>基础说明</h2>
        <ol>
          <li><a href="./test/01-layui.html">layui起步</a></li>
          <li><a href="./test/02-pageElement.html">页面元素</a></li>
          <li> <a href="./test/03-layuiUse.html">模块规范</a></li>
          <li><a href="./test/04-FAQ.html">常见问题</a></li>
        </ol>
      </div>
      <div class="layui-col-md4">
        <h2>页面元素</h2>
        <ol>
          <li><a href="./test/page/01-container.html">布局-栅格布局</a></li>
          <li><a href="./test/page/02-colors.html">颜色-颜色搭配</a></li>
          <li><a href="./test/page/03-icons.html">图标-iconfont</a></li>
          <li><a href="./test/page/04-anim.html">CSS3动画类</a></li>
          <li><a href="./test/page/05-button.html">按钮 button</a></li>
          <li><a href="./test/page/06-form.html">form 表单</a></li>
          <li><a href="./test/page/08-nav.html">nav 导航</a></li>
          <li><a href="./test/page/09-menu.html">menu 菜单</a></li>
          <li><a href="./test/page/10-tabs.html">tabs 选项卡</a></li>
          <li><a href="./test/page/11-progress.html">progress 进度条</a></li>
          <li><a href="./test/page/12-panel.html">panel 面板</a></li>
          <li><a href="./test/page/13-table.html">table 表格</a></li>
          <li><a href="./test/page/14-other.html">其他元素</a></li>
        </ol>
      </div>
      <div class="layui-col-md4">
        <h2>模块</h2>
        <ol>
          <li><a href="./admin/src/views/index.html">admin</a></li>
          <li><a href="./adminpro/start/index.html">adminpro</a></li>
          <li><a href="./test/model/01-layer.html">layer 弹出层</a></li>
          <li><a href="./test/model/"></a></li>
          <li><a href="./test/model/"></a></li>
        </ol>
      </div>
    </div>
  </div>

  <script>
    let colorArr = ['#ff7f50', '#a4b0be', '#2f3542', '#ff4757', '#3742fa', '#2ed573', '#eccc68', '#7bed9f', '##ffeaa7', '#00b894', '#fd79a8', '#fdcb6e', '#e17055', '#d63031', '#74b9ff', '#a29bfe', '#00cec9', '#55efc4'];
    let msg = "欢迎来到,LayUI学习峡谷!";
    let _html = '';
    for (let i = 0; i < msg.length; i++) {
      // for (let j = 0; j < colorArr.length; j++) {
      _html += `<span style="color:${colorArr[i]}">${msg[i]}</span>`;
      // }
    }
    let loop = document.getElementById('loop');
    // console.log(loop);
    loop.innerHTML = _html;
  </script>
</body>

</html>